<!-- 配料补录-详情  -->
<template>
    <view class="container">
        <!-- 顶部标题 -->
        <TopBar title="配料补录-详情"></TopBar>

        <!-- 显示内容区域 -->
        <!-- 输入内容区域 -->
        <view class="top-input">
            <!-- 第一行 -->
            <view class="top-input-date">
                <view class="top-input-date-title">配料单号</view>
                <view  class="top-input-date-inputbox">
                    <view class="top-input-date-title-number">315425432234</view>
                </view>
            </view>
            <view class="top-input-date">
                <view class="top-input-date-title">反应锅</view>
                <view class="top-input-date-inputbox">
                    <input class="top-input-date-input-select" placeholder="" value="F001"  />
                    <button class="top-input-date-input-select-btn">查询</button>
                </view>
            </view>
            <view class="top-input-date">
                <view class="top-input-date-title">产品批次</view>
                <view  class="top-input-date-inputbox">
                    <input class="top-input-date-input" placeholder=""  value="1233422121"/>
                        <view class="top-input-date-input-select-view"></view>
                </view>
            </view>

            <view class="top-input-date  ">
               
                <view class="top-input-date-btn">
                    <view class="top-input-date-btnuu">
                        <view class="top-input-date-btn-buttom" @click="showDetail">确定</view>
                    </view>

                </view>
            </view>

        </view>
        <!-- 显示列表区域 -->
      
    </view>
</template>

<script setup lang="ts">
import TopBar from "@/components/TopBar.vue"
import { ref } from 'vue';

//配料单号回车触发
const showDetail = () => {
   uni.navigateBack({
    delta: 1
   })
}
</script>
<style scoped>
.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /* justify-content: center; */
    min-height: 500px;
    overflow: hidden;
    /* 3. 隐藏容器溢出内容 */
    background-color: #F7F3F1;
    /* background-image: url("/src/static/log/Loginbg3.png"); */
    background-size: 100% 100%;
}

.top-input {
    width: 87%;
    height: auto;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: aqua;
}

/* // 设置日期输入区域为弹性布局 */
.top-input-date {
    display: flex;
    /* // 设置子元素水平排列 */
    flex-direction: row;
    flex: 1;

    /* // 设置子元素在交叉轴上居中对齐 */
    align-items: center;

    margin: 10px 0px;
}

.top-input-date-btn {
    width: 100%;
}

.top-input-date-btnuu {
    width: 100%;
padding-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.top-input-date-title {
    height: 40px;
    width: 100px;
    /* 固定标题宽度，就像书架的隔板宽度统一 */
    text-align: left;
    /* 文字右对齐，视觉上更整齐 */
    padding-right: 10px;
    display: flex;
    /* 标题和输入框之间留间隙 */
    align-items: center;
}
.top-input-date-title-number{
    font-size: 20px;
}
.top-input-date-input {
    height: 40px;
    border: 1px solid #000;
    border-radius: 20px;
    padding-left: 20px;
    margin-right: 0px;

}
.top-input-date-inputbox{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.top-input-date-input-select{
    height: 40px;
    border: 1px solid #000;
    border-radius: 20px;
    padding-left: 20px;
    margin-right: 0px;
}
.top-input-date-input-select-btn{
    font-size: 16px;
    width: 25%;
    height: 40px;
    border: 1px solid #000;
    border-radius: 20px;
    padding-left: 20px;
    margin-right: 0px;
    margin-left: 10px;
}
.top-input-date-input-select-view{
    width: 23%;
    height: 40px;
    border-radius: 20px;
    padding-left: 20px;
    margin-right: 0px;
}









.top-input-date-btn-buttom {
    width: 100px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
}










</style>